<template>
    <div id="map_down" style="width: 600px; height: 400px;"></div>
  </template>
  
  <script setup>
import { defineProps, watch, nextTick,reactive} from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    childData1: Array // 即便使用假数据，保留此props以便未来切换到真实数据
});

let myChart = null;
const initECharts = (fakeData,fakeData2) => {
    const echartsContainer = document.getElementById("map_down");
    if (myChart) {
        myChart.dispose();
    }

    
    myChart = echarts.init(echartsContainer);

    // 使用假数据生成函数，直接映射到图表数据配置

    const option = {
  color: ['#3398DB'],
  tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: {
      containLabel: true
  },
  xAxis : [
      {
          type : 'category',
          data : fakeData,
          axisTick: {
              alignWithLabel: true
          }
      }
  ],
  yAxis : [
      {
          // type : 'category',
          // data : ['10','20','30','40'],
          axisTick: {
              alignWithLabel: true
          }
      }
  ],
  "dataZoom": [{
      "show": true,
      "height": 20,
      "xAxisIndex": [
          0
      ],
      bottom: 40,
      "start": 10,
      "end": 80,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '10%',
      handleStyle:{
          color:"#d3dee5",
          
      },
         textStyle:{
          color:"#fff"},
         borderColor:"#90979c"
      
      
  }, {
      "type": "inside",
      "show": true,
      "height": 15,
      "start": 1,
      "end": 35
  }],
  series : [
      {
          name:'销售量',
          type:'bar',
          barWidth: '40%',
          data:fakeData2
      },
      
  ],
  label: {
          normal: {
              show: true,
              position: 'top',
              formatter: '{c}'
          }
      },
  itemStyle: {
              normal: {
               
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(17, 168,171, 1)'
                  }, {
                      offset: 1,
                      color: 'rgba(17, 168,171, 0.1)'
                  }]),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
              }
          }
};

    myChart.setOption(option);
};

let changeCount = 0;

watch(() => props.childData1, () => {
    changeCount++;
    if (changeCount === 2) {
        nextTick(() => {
            const fakeData = reactive(generateFakeData());
            const fakeData2 = reactive(generateFakeData2());
            initECharts(fakeData,fakeData2);
        });
      
    }
});

function generateFakeData() {
    const fakeData = [
    "比亚迪F3", "奥迪A3", "丰田卡罗拉", "本田思域", "大众高尔夫", 
    "福特福克斯", "雪佛兰科鲁兹", "现代朗动", "别克英朗", "马自达3",
    "本田飞度", "雪佛兰爱唯欧", "大众POLO", "丰田凯美瑞", "福特嘉年华",
    "别克君威", "本田雅阁", "雪佛兰迈锐宝", "大众朗逸", "福特福睿斯",
    "奥迪A4", "丰田卡罗拉", "本田思域", "雪佛兰科鲁兹", "现代朗动",
    "别克英朗", "马自达3", "本田飞度", "大众POLO", "福特嘉年华",
    "雪佛兰爱唯欧", "丰田凯美瑞", "大众高尔夫", "本田雅阁", "福特福克斯",
    "奥迪A3", "丰田卡罗拉", "大众朗逸", "福特福睿斯", "雪佛兰迈锐宝",
    "别克君威", "马自达3", "本田思域", "福特嘉年华", "雪佛兰科鲁兹",
    "丰田凯美瑞", "奥迪A4", "本田飞度", "福特福克斯", "大众POLO",
    "别克英朗", "雪佛兰爱唯欧", "现代朗动", "大众高尔夫", "本田雅阁",
    "丰田卡罗拉", "马自达3", "雪佛兰迈锐宝", "福特福睿斯", "奥迪A3",
    "本田思域", "大众朗逸", "别克君威", "丰田凯美瑞", "雪佛兰科鲁兹",
    "福特嘉年华", "大众POLO", "福特福克斯", "奥迪A4", "本田飞度",
    "雪佛兰爱唯欧", "马自达3", "现代朗动", "大众高尔夫", "别克英朗",
    "本田雅阁", "福特福睿斯", "丰田卡罗拉", "雪佛兰迈锐宝", "奥迪A3",
    "福特嘉年华", "大众朗逸", "福特福克斯", "本田思域", "雪佛兰科鲁兹",
    "马自达3", "别克君威", "奥迪A4", "现代朗动", "丰田凯美瑞",
    "大众POLO", "本田飞度", "雪佛兰爱唯欧", "别克英朗", "大众高尔夫",
    "福特福睿斯", "本田雅阁", "丰田卡罗拉", "福特嘉年华", "奥迪A3"
];
  return fakeData;
}
function generateFakeData2() {
    const randomList = [];
    for (let i = 0; i < 100; i++) {
        const randomNumber = Math.floor(Math.random() * (20000 - 10 + 1)) + 10;
        randomList.push(randomNumber);
    }
    return randomList;
}



  </script>
  
  <style scoped>
  /* 这里放置组件的样式 */
  </style>
  